<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        body {
            background-color: rgb(0, 1, 46);
            color: rgb(109, 177, 255);
        }

        div {
            width: 400px;
            height: 330px;
            margin: 10% auto;
            text-align: right;
            box-sizing: border-box;
            padding-right: 30px;
        }

        h1 {
            text-align: center;
            margin: 0;
        }

        button {
            width: 100%;
            border-radius: 3px;
            margin-top: 20px;
            background-color: rgb(109, 177, 255);
            border: 0;
        }

        button:hover {
            background-color: rgb(149, 198, 255);
            cursor: pointer;
        }

        input {
            width: 250px;
            height: 25px;
            border-radius: 3px;
            border: 0;
            margin: 3px 0;
            background-color: rgb(109, 177, 255);
            padding-left: 10px;
        }

        p {
            display: inline-block;
            margin: 2px;
            font-size: 10px;
            text-align: left;
        }

        input::placeholder {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div>
        <h1>管理员注册</h1>
        账号： <input type="text" placeholder="请输入6位数账号">
        <p></p><br>
        密码：<input type="password" placeholder="请输入包含大小写、特殊字符、长度在9位以上的密码">
        <p></p><br>
        确认密码：<input type="password" placeholder="请确认密码">
        <p></p><br>
        手机号：<input type="text" placeholder="请输入11位手机号">
        <p></p><br>
        邮箱：<input type="email" placeholder="请输入邮箱">
        <p></p><br>
        <button onclick="">确认注册</button>
    </div>
    <script>
        //获取DOM
        var inp1 = document.querySelectorAll('input')[0]
        var inp2 = document.querySelectorAll('input')[1]
        var inp3 = document.querySelectorAll('input')[2]
        var inp4 = document.querySelectorAll('input')[3]
        var inp5 = document.querySelectorAll('input')[4]
        var but = document.querySelector('button')
        //注册按钮
        but.onclick = () => {
            event.preventDefault(but)
            var p1 = document.querySelectorAll('p')[0]
            var p2 = document.querySelectorAll('p')[1]
            var p3 = document.querySelectorAll('p')[2]
            var p4 = document.querySelectorAll('p')[3]
            var p5 = document.querySelectorAll('p')[4]
            const shoujihao = /^1(3[0-9]|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
            const email = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
            const passwordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{9,}$/;
            if (inp1.value.length != 6) {
                p1.innerHTML = '请输入正确的用户名'
            } else {
                p1.innerHTML = ''
            }
            if (!passwordReg.test(inp2.value)) {
                p2.innerHTML = '请输入正确的密码'
            } else {
                p2.innerHTML = ''
            }
            if (!inp3.value == inp2.value) {
                p3.innerHTML = '请输入正确的密码'
            } else {
                p3.innerHTML = ''
            }
            if (!shoujihao.test(inp4.value)) {
                p4.innerHTML = '请输入正确的手机号'
            } else {
                p4.innerHTML = ''
            }
            if (!email.test(inp5.value)) {
                p5.innerHTML = '请输入正确的邮箱'
            } else {
                p5.innerHTML = ''
            }
            if (p1.innerHTML == '' && p2.innerHTML == '' && p3.innerHTML == '' && p4.innerHTML == '' && p5.innerHTML == '') {
                var obj = {
                    img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.XS6EtBzAmWWa31cfFvcx6QHaHa?w=195&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                    name: inp1.value,
                    password: inp2.value,
                    photo: inp4.value,
                    email: inp5.value,
                }
                localStorage.setItem('1', JSON.stringify(obj))
                localStorage.setItem('geren', JSON.stringify(obj))
                location.assign('./登录.html')
            }
        }
    </script>
</body>

</html>